from nicegui import ui


def on_log():
    # print(label1.text())
    value1 = input1.value
    value2 = input2.value
    print(value1, value2)


# 初始化页面，设置视口等适配手机端
ui.add_head_html(
    '<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">'
)
ui.add_head_html(
    '<meta name="viewport" content="width=device-width, initial-scale=1.0">'
)


# log ui
img = ui.image("img\991138.jpg").props("absolute-top text-center").tailwind("h-screen")
# with ui.image("img\991138.jpg").props("center no-repeat"):
with ui.label("").classes(
    "absolute top-1/4 inset-x-1/3 w-1/3 rounded bg-slate-300 shadow-2xl bg-white opacity-80"
):
    # 使用网格布局才能使text-center生效
    with ui.grid():
        label1 = ui.label("欢迎访问！").tailwind("text-center text-2xl text-dark my-2")
        # 发现一个问题，使用tailwind时无法获得控件的值,也就是说tailwind本身作为一个类仅仅起到修改控件
        # 样式的作用，而且使用后就覆盖了原本的类的自身函数,可以利用.element解决此问题
        # input1 = ui.input('账号/邮箱').tailwind('text-blue-700','px-10').element
        input1 = (
            ui.input("账号/邮箱")
            .props("outlined")
            .style("color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;")
        )
        input2 = (
            ui.input("密码", password=True)
            .props("outlined")
            .style("padding-left: 2.5rem;padding-right: 2.5rem;")
        )
        #'gap:10em'是CSS中的一种属性值，用于设置元素之间的间距。它表示间距的大小为10个字符的宽度。
        # 这个属性通常用于布局调整，可以在水平或垂直方向上增加或减少元素之间的间距。
        with ui.row().style("gap:12em"):
            link1 = ui.link("忘记密码").tailwind("ml-10 w-1/3 text-left")
            link2 = ui.link("注册账号").tailwind("ml-9 text-right")
            # 单个空间用mx
        button1 = ui.button("登录", on_click=on_log).tailwind("mx-10 my-3")
# label2 = ui.label('label ').style('color: rgb(37 99 235);padding-left: 2.5rem;padding-right: 2.5rem;')


def main():
    if app.dev:
        ui.button("调试按钮").classes("debug-only")


def require_auth(func):
    def wrapper(*args, **kwargs):
        if not is_authenticated():
            return ui.open("/login")
        return func(*args, **kwargs)

    return wrapper


@require_auth
def protected_page():
    ui.label("受保护的内容")


if __name__ in {"__main__", "__mp_main__"}:
    ui.run(port=80, title="手机端工作台", host="0.0.0.0")
